<template>
  <div id="index">
    <div class="app-container"
      id="container">

      <el-form ref="form"
        :model="form"
        :rules="rules"
        label-width="120px"
        label-position="right">
        <div class="product-div">
          <div class="product-header">
            <em style="font-size: 18px;font-style: normal;"
              class="big_title_style">预约信息</em>
          </div>

          <el-row>
            <el-col :span="7">
              <el-form-item label="客户名称">
                <div style="display: flex; align-items: center;">
                  <span>{{ form.customerName }}</span>
                  <el-link type="primary"
                    class="ml10"
                    :underline="false"
                    @click="toViewCustomerDetail">查看详情</el-link>
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="7">
              <el-form-item label="客户性别">
                <span>{{ form.sexStr }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="7">
              <el-form-item label="联系电话">
                <span>{{ form.mobile }}</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="7">
              <el-form-item label="预约日期">
                <span>{{ parseTime(form.subscribeDate ,'{y}-{m}-{d}') }} {{ parseTime(form.startDate, '{h}:{i}') }} </span>
              </el-form-item>
            </el-col>

            <el-col :span="7">
              <el-form-item label="服务状态">
                <span v-if="form.serviceStatus != '100' && form.serviceStatus != '99'">{{ form.serviceStatusStr }} </span>

                <span v-if="form.serviceStatus == '99'">{{ form.serviceStatusStr }}
                  <el-popover placement="top-start"
                    title=""
                    width="100"
                    trigger="hover"
                    :content="form.remark">
                    <el-button type="text"
                      icon="el-icon-warning"
                      slot="reference"></el-button>
                  </el-popover>
                </span>

                <span v-if="form.serviceStatus == '100'">{{ form.serviceStatusStr }}
                  <el-popover placement="top-start"
                    title=""
                    width="100"
                    trigger="hover"
                    :content="form.remark">
                    <el-button type="text"
                      icon="el-icon-warning"
                      slot="reference"></el-button>
                  </el-popover>
                </span>

              </el-form-item>

            </el-col>
            <el-col :span="7">
              <el-form-item label="服务类型">
                <span>{{ form.serviceTypeStr }} </span>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="7">
              <el-form-item label="预约类型">
                <span>{{ form.subscribeTypeStr }} </span>
              </el-form-item>
            </el-col>

            <el-col :span="7">
              <el-form-item label="来源">
                <span>{{ form.sourcePlatformStr }} </span>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="21"
              style="padding-bottom: 24px">
              <el-table :data="form.itemVoList"
                border
                style="margin-left:45px ;">
                <el-table-column prop="itemName"
                  label="服务名称">
                </el-table-column>
                <el-table-column prop="name"
                  label="服务时长">
                  <template slot-scope="scope">
                    <span>{{ scope.$index == 0 ?
                                                scope.row.itemServiceDuration : scope.row.itemComposeDuration
                                        }}</span>
                  </template>
                </el-table-column>
                <el-table-column prop="nickName"
                  label="操作师">
                </el-table-column>
              </el-table>
            </el-col>
          </el-row>
        </div>

        <div class="product-div">
          <div class="product-header">
            <em style="font-size: 18px;font-style: normal;"
              class="big_title_style">服务信息</em>
          </div>

          <el-form-item label="项目铺垫">
            <span>{{ form.projectBedding }} </span>
          </el-form-item>

          <el-form-item label="客户诉求">
            <span>{{ form.customerRequirement }} </span>
          </el-form-item>
          <!-- 
          <el-form-item label="皮肤问题">
            <span>{{ form.skinProblems }} </span>
          </el-form-item> -->
          <el-form-item label="客户标签">
            <span :key="ind"
              v-for="(item,ind) in form.labelInfoList">{{ item.labelName  }}, </span>
          </el-form-item>

          <el-form-item label="客户对照照片">
            <el-image :z-index="zIndex"
              :preview-src-list="form.customerImagesStr"
              v-for="(imgm, index) in form.customerImagesStr"
              :src="imgm"
              :key="index"
              style="
                      width: 80px;
                      height: 80px;
                      margin-left: 10px;
                      margin-top: 10px;
                      border: 1px solid #ebebeb;
                      border-radius: 6px;
                    ">
            </el-image>
          </el-form-item>

        </div>

        <div class="product-div">
          <div class="product-header">
            <em style="font-size: 18px;font-style: normal;"
              class="big_title_style">评价信息</em>
          </div>

          <el-row>
            <el-col :span="7">
              <el-form-item label="技能评分">
                <el-rate disabled
                  style="    margin-top: 7px;"
                  v-model="form.skillStar"
                  :colors="colors">
                </el-rate>
              </el-form-item>
            </el-col>

            <el-col :span="7">
              <el-form-item label="环境评分">
                <el-rate disabled
                  style="    margin-top: 7px;"
                  v-model="form.attitudeStar"
                  :colors="colors">
                </el-rate>
              </el-form-item>
            </el-col>

            <el-col :span="7">
              <el-form-item label="美容师评分">
                <el-rate disabled
                  style="    margin-top: 7px;"
                  v-model="form.serveStar"
                  :colors="colors">
                </el-rate>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-form-item label="评价时间">
              <p>{{ form.appraiseTime }}</p>
            </el-form-item>

          </el-row>

          <el-row>
            <el-form-item label="评价内容">
              <p>{{ form.appraiseContent }}</p>
            </el-form-item>

          </el-row>
          <el-row>
            <el-form-item label="评价图片">
              <el-image :z-index="zIndex"
                :preview-src-list="form.appraiseImagesStr"
                v-for="(imgm, index) in form.appraiseImagesStr"
                :src="imgm"
                :key="index"
                style="
                      width: 80px;
                      height: 80px;
                      margin-left: 10px;
                      margin-top: 10px;
                      border: 1px solid #ebebeb;
                      border-radius: 6px;
                    ">
              </el-image>
            </el-form-item>
          </el-row>

        </div>

        <div class="product-div">
          <div class="product-header">
            <em style="font-size: 18px;font-style: normal;"
              class="big_title_style">操作记录</em>
          </div>

          <el-row>
            <el-col :span="21">
              <el-table :data="form.operateList"
                border
                style="margin-left:45px ;">
                <el-table-column prop="createName"
                  label="操作人">
                </el-table-column>
                <el-table-column prop="operateTypeStr"
                  label="操作内容">
                </el-table-column>

                <el-table-column prop="createTime"
                  label="操作时间">
                </el-table-column>
              </el-table>
            </el-col>
          </el-row>
        </div>

      </el-form>
      <div class="dw">
        <el-button @click="colsePro"
          style="margin-top: 10px;margin-left: 45%;">返回</el-button>
        <!-- <el-button type="primary" @click="submitForm" style="margin-top: 10px;">保存</el-button> -->
      </div>
    </div>
  </div>
</template>

<script>
import {
  getDetail
} from "@/api/customerService/record";
export default {
  components: {

  },
  data () {
    return {
      colors: ['#99A9BF', '#F7BA2A', '#FF9900'],
      zIndex: 2000,
      form: {},
      rules: {},
    };
  },

  created () {
    const subscribeId = this.$route.params && this.$route.params.subscribeId;
    getDetail(subscribeId).then(response => {
      this.form = response.data
    })
  },
  methods: {
    toViewCustomerDetail () {
      this.$router.push("/customer/detail/" + this.form.customerId);
    },
    submitForm () {

    },
    colsePro () {

      //   this.$router.go(-1);
      this.$store.dispatch("tagsView/delView", this.$route);
      this.$router.push({
        path: "/store/subscribeManager/subscribeList",
        query: {
          t: Date.now()
        }
      });
    }
  }
}
</script>

<style scoped>
#container {
  width: 100%;
  /* height: 50%; */
  height: 100%;
  padding-bottom: 80px;
}

#photo {
  float: left;
  width: 70%;
}

#content {
  float: right;
  width: 30%;
}

.product-header {
  position: absolute;
  top: 0;
  width: 600px;
  padding: 18px;
  background-color: #fff;
  -moz-border-radius: 4px;
  border-radius: 4px;
  height: 40px;
}

.product-div {
  background-color: #fff;
  position: relative;
  padding-right: 16px;
  padding-top: 54px;
  border: 1px solid #ebebeb;
  border-radius: 10px;
  width: 1200px;
  margin: auto;
  top: 20px;
  bottom: -20px;
  margin-bottom: 24px;
}

.product-div-two {
  background-color: #fff;
  position: relative;
  padding-right: 16px;
  padding-top: 54px;
  border: 1px solid #ebebeb;
  -moz-border-radius: 10px;
  border-radius: 10px;
  width: 1200px;
  margin: auto;
  top: 20px;
  bottom: -20px;
  margin-bottom: 24px;
}

.product-div-three {
  background-color: #fff;
  position: relative;
  padding-right: 16px;
  padding-top: 54px;
  border: 1px solid #ebebeb;
  -moz-border-radius: 10px;
  border-radius: 10px;
  width: 1200px;
  margin: auto;
  top: 20px;
  bottom: -20px;
  margin-bottom: 24px;
}

.place-font {
  color: #999;
  font-size: 13px;
  position: relative;
}

.dw {
  border: 1px;
  position: fixed;
  bottom: 0px;
  left: 0;
  z-index: 200;
  padding-left: 120px;
  background-color: #fff;
  border-top: 1px solid #eee;
  width: 100%;
  height: 55px;
}

.div-img {
  display: none;
}

.div-text {
  margin: 22px 0px 12px 120px;
  color: #2656bd;
  cursor: pointer;
  font-size: 13px;
}

.div-append {
  line-height: 34px;
  font-size: 14px;
  color: #606266;
  margin-left: -50%;
}

.div-appendHide {
  line-height: 34px;
  font-size: 14px;
  color: #606266;
  margin-left: -50%;
  visibility: hidden;
}
</style>
